<template>
  <el-scrollbar style = "height: 400px">
    <div v-show = "showHistory">
      <!--搜索历史-->
      <el-row>
        <el-col style = "padding: 5px 20px">
          <h5>
            搜索历史
            <i-delete theme = "outline" size = "13" fill = "#000" :strokeWidth = "3" strokeLinejoin = "miter" />
          </h5>
          <div class = "search-tags">
            <el-tag
                v-for = "(item,index) in historyKeyword"
                :key = "item"
                closable
                color = "#fff"
                @close = "deleteKeyword(index)"
            >
              Tag {{ item }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
      <!--热搜榜-->
      <el-row>
        <el-col>
          <h5 style = "padding: 5px 20px">热搜榜</h5>
          <ul class = "search-hot">
            <li class = "row-container hot-li" v-for = "(item,index) in hotList" :key = "item">
              <span class = "rank">{{ index + 1 }}</span>
              <div class = "column-container content">
                <div style = "padding-bottom: 5px"><span class = "singer">{{ item.name }}</span> <span>{{
                    item.point
                                                                                                       }}</span></div>
                <span> {{ item.description }}</span>
              </div>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div v-show = "!showHistory">
      <!--猜你想搜-->
      <ul class = "suggestion-ul">
        <h3>
          <i-search theme = "outline" size = "14" fill = "#808080" :strokeWidth = "3" strokeLinejoin = "miter" />
          猜你想搜
        </h3>
        <li v-for = "item in 5" :key = "item">123</li>
      </ul>
      <!--单曲-->
      <ul class = "suggestion-ul">
        <h3>
          <i-music-one theme = "outline" size = "14" fill = "#808080" :strokeWidth = "3" strokeLinejoin = "miter" />
          单曲
        </h3>
        <li v-for = "item in 5" :key = "item">123</li>
      </ul>
      <!--歌手-->
      <ul class = "suggestion-ul">
        <h3>
          <i-microphone-one theme = "outline" size = "14" fill = "#808080" :strokeWidth = "3"
                            strokeLinejoin = "miter" />
          歌手
        </h3>
        <li v-for = "item in 5" :key = "item">123</li>
      </ul>
      <!--专辑-->
      <ul class = "suggestion-ul">
        <h3>
          <i-record theme = "outline" size = "14" fill = "#808080" :strokeWidth = "3" strokeLinejoin = "miter" />
          专辑
        </h3>
        <li v-for = "item in 5" :key = "item">123</li>
      </ul>
    </div>
  </el-scrollbar>
</template>

<script setup>

import {reactive, ref} from "vue";
//控制显示搜索历史和搜索建议
const showHistory = ref(true)

// 热搜和搜索历史
const historyKeyword = reactive(["1", "2", "3", "4", "5", "6"])
const hotList = reactive([
  {
    name: '林俊杰',
    description: '哇塞，这也太厉害了吧',
    point: 123456
  }, {
    name: '林俊杰',
    description: '哇塞，这也太厉害了吧',
    point: 123456
  }, {
    name: '林俊杰',
    description: '哇塞，这也太厉害了吧',
    point: 123456
  }, {
    name: '林俊杰',
    description: '哇塞，这也太厉害了吧',
    point: 123456
  }, {
    name: '林俊杰',
    description: '哇塞，这也太厉害了吧',
    point: 123456
  }, {
    name: '林俊杰',
    description: '哇塞，这也太厉害了吧',
    point: 123456
  }, {
    name: '林俊杰',
    description: '哇塞，这也太厉害了吧',
    point: 123456
  },
])

//删除历史记录中的一个
function deleteKeyword(index) {
  historyKeyword.find((item, currentIndex) => {
    if (currentIndex === index) historyKeyword.splice(currentIndex, 1)
  })
}
</script>

<style lang = "less" scoped>
.tags {
  padding: 3px 10px;
  margin-right: 5px;
}

.search-hot {
  > * {
    padding: 0 20px;
  }

  .hot-li {
    &:hover {
      background-color: rgba(128, 128, 128, .35);
    }

    &:nth-child(-n+3) span {
      color: #d86767;
    }

    .rank {
      line-height: 50px;
      width: 30px;
      height: 50px;
      font-size: 20px;


    }


    .content {
      width: 100%;
      margin: 5px 0;

      span {
        font-size: 10px;
        color: #808080;
        opacity: .8;
      }

      .singer {
        font-size: 14px;
        font-weight: bold;
        opacity: 1;
      }
    }

  }
}

.suggestion-ul {
  h3 {
    margin: 10px 20px;
    opacity: .8;

    &:hover {
      opacity: 1;
    }
  }

  li {
    height: 25px;
    line-height: 25px;
    padding-left: 42px;

    &:hover {
      background-color: rgba(128, 128, 128, 0.16);
    }
  }
}

</style>